<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>计算属性和侦听器</title>
</head>

<body>
    <div id="app">
        <!-- 实现一个购物车功能
        1. 数据初始化处理
        2.计算商品总价
        3.选择商品数量：当商品数量超过库存做提示
        -->
        <ul>
            <li v-for="(item, index) in car" >
            {{item.pname}} --- 商品价格：{{item.price}} --- 库存：{{item.stock}}
            数量：<input type="number" v-model="item.num" style="width: 30px;" />
            </li>
            <li><strong>总价:</strong>{{calcSum}}</li>
            <li v-html="message"></li>
            <li v-html="warn()"></li>
        </ul>
       
    </div>
    <script src="../node_modules/vue/dist/vue.js"></script>
    
    <script>
        new Vue({
            el:"#app",
            data:{
                car:[
                    {pname:'Iphone 12',price:7999,stock:10,num:1},
                    {pname:'小米11',price:3599,stock:3,num:4},
                ],
                message:"",
            },
            // methods : 当方法中使用的数据发生改变，方法会自动调用
            methods: {
                // calcSum(){
                //     let sum=0;
                //     this.car.forEach(item => {
                //         sum+=item.price*item.num;
                //     });
                //     return sum;
                // }
                warn(){
                    let message="";
                    this.car.forEach(item => {
                        if(item.num>item.stock){
                            message+=`${item.pname}的库存超出限制<br/>`
                        }
                    });
                    return message;
                }
            },
            // 计算属性: 当方法中使用的数据发生改变，方法会自动调用
            computed:{
                 calcSum(){
                    let sum=0;
                    this.car.forEach(item => {
                        sum+=item.price*item.num;
                    });
                    return sum;
                }
            },
            // 侦听器 专门用于侦听数据的变化，当数据发生变化会自动调用方法
            watch:{
                // 要侦听的数据: 数组
                car:{
                    handler(newvalue,oldvalue){ 
                        this.message="";
                        this.car.forEach(item => {
                            if(item.num>item.stock){
                                this.message+=`${item.pname}的库存超出限制<br/>`
                            }
                        });
                    },
                    deep:true   //深度侦听器
                },
                // 基础类型的侦听， 将侦听数据作为函数就可以了  
                message(newvalue,oldvalue){
                    console.info(newvalue,oldvalue)
                }
            }
        });


        /*
        方法和计算属性的区别：
            声明发生不一样，调用不一样方法要用(), 计算属性调用不要加()
        */


        /*
        方法和侦听器的区别：
            方法： 方法中任意数据发生了改变就会自动调用方法
            可以调用，进行返回值


            侦听器：需要指定具体的侦听数据，只有被具体指定的侦听数据发生了改变才会触发
            不能像方法那样去调用， 而是靠vue自动触发

        
        */
    </script>

</body>

</html>